material-tableで画面幅に応じてヘッダーが改行されないようにする
こんにちは、CX事業本部の若槻です。
material-tableでは、PCから閲覧時には問題ありませんが、スマートフォンなどからの閲覧時に画面幅が狭くなると、画面幅に応じてヘッダーが改行されて列名が縦長に表示されてしまいます。
-
PC閲覧時
-
スマートフォンからの閲覧時
今回は、画面幅に応じてヘッダーが改行されないようにしてみました。
有効だった方法
結論としては、次のようにMaterialTableコンポーネントのoptionsでheaderStyle: { whiteSpace: 'nowrap' }の定義を追加することにより、ヘッダーを改行させないようにすることができました。
<MaterialTable
options={{
showTitle: false,
filtering: true,
headerStyle: { whiteSpace: 'nowrap' },
}}
/>
有効ではなかった方法
有効だった方法に行き着くまでに色々と試しましたが、次の方法では改行が行われてしまい有効ではありませんでした。
options
同じくMaterialTableコンポーネントのoptionsに次の定義を追加した場合。
fixedColumns: {
right: 100,
},
overflowY: 'auto',
style: {
width: '100pt',
},
style: {
width: '100%',
},
columns
MaterialTableコンポーネントのcolumnsの各列の要素に次の定義を追加した場合。
columns={[
{
title: '商品名',
field: 'itemName',
defaultSort: 'asc',
filtering: false,
width: '100%',
},
width: '100px',
style: { whiteSpace: 'nowrap', },
overflow: 'auto',
headerStyle: { width: '100%' },
headerStyle: { width: '100pt' },
style: { width: '100pt', },
style: { width: '100%', },
おわりに
material-tableで画面幅に応じてヘッダーが改行されないようにしてみました。
MaterialUIやmaterial-tableで作成したページをどのようにスマートフォンに適応させるかは今後の課題になってきそうです。
参考
以上
![[Rust] N-APIアドオンを作成してTypeScriptコードを変換する [Bun 1.2]](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-8c6d505db5519c426a9f992bfb37e1a0/753887f068b49792ca4f521aa8f565dd/eyecatch_bun_1200x630.png)
